<template>
  <div class="base-alarm-detail-page">
    <div class="event-container">
      <div class="content">
        <div class="left">
          <eventFLowInfo
            :orderData="orderData"
            :reldevice="reldevice"
            :monitors="monitors"
            :videoData="videoData"
            :imgsList="imgsList"
            :position.sync="position"
            :horiAzimuthAngle.sync="horiAzimuthAngle"
            :positionMonitor.sync="positionMonitor"
            :warningOrderId="warningOrderId"
          />
        </div>
        <div class="right">
          <medias-comp
            :imgs="imgsList"
            :order="orderData"
            :video="videoData"
            :position.sync="position"
            :positionMonitor.sync="positionMonitor"
            v-on="$listeners"
          />
        </div>
        <!--        <div class="time-line-container" v-if="isEventDetail">-->
        <!--          <timeLineModel class="timeLineModel" :timeline="allDataSource" :viewDataSource="orderData"></timeLineModel>-->
        <!--        </div>-->
      </div>
    </div>
    <footerButtonGroup
      :orderData="orderData"
      :warningOrderId="warningOrderId"
      @reloadOrderData="reloadOrderData"
    />
  </div>
</template>

<script>
import eventFLowInfo from "@/views/pages/eventManagement/alarmEventDetail/eventFLowInfo.vue";
import MediasComp from "@/components/eventManagement/Medias.vue";
import footerButtonGroup from "@/views/pages/eventManagement/alarmEventDetail/footerButtonGroup.vue";
import timeLineModel from "@/views/pages/eventManagement/timeLine";

import eventBus from "@/utils/event-bus";
import { getRecordByOrderId } from "@/api/modules/eventManagement/eventDetail";
import { $getUrlParam, getQueryString } from "@/utils/common";
import { getOrderInfo } from "@/api/modules/custManage/custEventJudge";
export default {
  name: "BaseAlarmDetailPage",
  provide() {
    return {
      isEventQuery: this.isEventQuery, // 事件查询
      isRecycleBin: this.isRecycleBin, // 回收站
      isCustOperate: this.isCustOperate, // 运营研判
    };
  },
  props: {
    orderData: {
      type: Object,
      default: () => ({}),
      required: true,
    },
    reldevice: {
      type: Object,
      default: () => ({}),
    },
    videoData: {
      type: Array,
      default: () => [],
    },
    imgsList: {
      type: Array,
      default: () => [],
    },
    curOrderStatus: {
      type: String,
      default: "",
    },
    warningOrderId: {
      type: String,
      default: "",
    },
    monitors: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    eventFLowInfo,
    MediasComp,
    footerButtonGroup,
    timeLineModel,
  },
  data() {
    return {
      visitedViews: this.$store.getters.visitedViews,
      horiAzimuthAngle: "",
      positionMonitor: [],
      position: [],
      // allDataSource: [],
      isEventQuery: location.href.includes("/eventLinks"), // 是否是事件查询
      isRecycleBin: location.href.includes("/recycleBinDetail"), // 是否是回收站
      isCustOperate: location.href.includes("/custOperateDetail"), // 是否是运营研判详情
    };
  },
  created() {
    this.$nextTick(this.changeTagTitle);
  },
  watch: {
    curOrderStatus() {
      this.changeTagTitle();
    },
    warningOrderId() {
      this.getRecordByOrder();
    },
    "orderData.enableAcceptanceMode"() {
      this.changeTagTitle();
    },
  },
  computed: {
    isEventDetail() {
      if (!this.isEventQuery) {
        return false;
      }
      if (!this.curOrderStatus) {
        // 防止curOrderStatus为空时，子组件多次渲染问题
        return false;
      }
      if (getQueryString("isDetail") === "1") {
        return true;
      }
      if (getQueryString("ifEdit") === "0") {
        return true;
      }
      return (
        this.pageType || !["1", "2", "4", "5"].includes(this.curOrderStatus)
      );
    },
    hideFooterButtonGroup() {
      return (
        $getUrlParam("page") === "13" ||
        $getUrlParam("page") === "12" ||
        (this.isCustOperate && this.orderData.judgeResult !== "3")
      );
    },
  },
  methods: {
    // 改变页签标题
    changeTagTitle() {
      const selectedTag = this.visitedViews.findLast(
        (item) => item.fullPath === this.$route.fullPath
      );
      if (this.isEventQuery) {
        // 事件查询
        selectedTag.title = this.getEventQueryTitle();
      }
      if (this.isRecycleBin) {
        // 回收站
        selectedTag.title = this.getRecycleBinTitle();
      }
      if (this.isCustOperate) {
        // 运营研判
        selectedTag.title =
          $getUrlParam("localFlag") === "1"
            ? "属地运营研判详情"
            : "运营研判详情";
      }
      this.$store.dispatch("tagsView/updateVisitedView", selectedTag);
    },
    /**
     * 获取事件查询页签名称
     * @returns {string}
     */
    getEventQueryTitle() {
      if (this.isEventDetail) {
        return "告警事件详情";
      }
      if (
        this.orderData?.enableAcceptanceMode === "1" &&
        ["1", "2", "4", "5"].includes(this.curOrderStatus)
      ) {
        return "事件受理";
      }
      switch (this.curOrderStatus) {
        case "1":
          return "事件研判";
        case "2":
          return "事件调度";
        case "4":
          return "事件处置";
        case "5":
          return "事件核实";
        default:
          return "告警事件详情";
      }
    },
    /**
     * 获取回收站页签名称
     * @returns {string}
     */
    getRecycleBinTitle() {
      let title = "回收站详情";
      const page = $getUrlParam("page");
      switch (page) {
        case "11":
          title = "告警压制详情";
          break;
        case "12":
          title = "删除告警详情";
          break;
        case "13":
          title = "转移告警详情";
          break;
      }
      return title;
    },
    getRecordByOrder() {
      getRecordByOrderId({ orderId: this.warningOrderId }).then((result) => {
        if (result.code === 200) {
          this.allDataSource = result.data.rows;
          for (let i = 0; i < this.allDataSource.length; i++) {
            this.allDataSource[i].flowNodeTime = this.allDataSource[
              i
            ].flowNodeTime.replace(/-/g, "/");
          }
          result.data.rows.map((item, index) => {
            //如果关闭了事件，办理过程中不显示当前环节信息
            if (item.remark && item.remark.indexOf("关闭告警") > -1) {
              result.data.rows.splice(index, 1);
            }
          });
        }
      });
    },
    reloadOrderData() {
      eventBus.$emit("reloadOrderData");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/common/customBaseUi.scss";
</style>
<style scoped lang="scss">
$contentHeight: calc(100% - 108px);
.base-alarm-detail-page {
  height: $contentHeight;
}
.hide-btn-height-fit {
  height: calc(100% - 60px);
}
.event-container {
  height: 100%;
}
.time-line-container {
  height: 100%;
  width: 100%;
  flex: 2;
}
.content {
  display: flex;
  height: 100%;
  flex: 3;
  padding: 12px 24px;
  overflow: hidden;
  .left {
    height: 100%;
    flex: 3;
    overflow: hidden;
  }
  .right {
    flex: 3;
    padding-left: 12px;
  }
}
</style>
